<template>
  <!-- <div class="topological">topological</div> -->
  <div id="mountNode"></div>
</template>
<script setup>
import { Util, Graph, registerNode } from "@antv/g6";
import { onMounted, ref } from "vue";
import testData from "@/components/topological/testData";
var data = {
  nodes: [
    {
      id: "node1",
      x: 100,
      y: 100,
      shape: "circle-animate",
      size: 20,
      label: "图形动画",
      labelCfg: {
        position: "top",
      },
    },
    {
      id: "node2",
      x: 300,
      y: 200,
      shape: "background-animate",
      color: "#40a9ff",
      size: 20,
      label: "背景动画",
      labelCfg: {
        position: "left",
        offset: 10,
      },
    },
    {
      id: "node3",
      x: 400,
      y: 100,
      size: [40, 40],
      shape: "inner-animate",
      img: "",
      label: "rect",
      labelCfg: {
        position: "right",
      },
    },
    {
      id: "node4",
      x: 300,
      y: 300,
      shape: "rect",
      label: "rect",
      labelCfg: {
        position: "bottom",
      },
    },
  ],
  edges: [
    {
      source: "node1",
      target: "node2",
    },
    {
      source: "node3",
      target: "node2",
    },
    {
      source: "node2",
      target: "node4",
    },
  ],
};

// 放大、变小动画
registerNode(
  "circle-animate",
  {
    afterDraw: function afterDraw(cfg, group) {
      var shape = group.get("children")[0];
      shape.animate(
        {
          repeat: true,
          onFrame: function onFrame(ratio) {
            var diff = ratio <= 0.5 ? ratio * 10 : (1 - ratio) * 10;
            return {
              r: cfg.size / 2 + diff,
            };
          },
        },
        3000,
        "easeCubic"
      );
    },
  },
  "circle"
);

registerNode(
  "background-animate",
  {
    afterDraw: function afterDraw(cfg, group) {
      var r = cfg.size / 2;
      var back1 = group.addShape("circle", {
        zIndex: -3,
        attrs: {
          x: 0,
          y: 0,
          r: r,
          fill: cfg.color,
          opacity: 0.6,
        },
      });
      var back2 = group.addShape("circle", {
        zIndex: -2,
        attrs: {
          x: 0,
          y: 0,
          r: r,
          fill: cfg.color, // 为了显示清晰，随意设置了颜色
          opacity: 0.6,
        },
      });

      var back3 = group.addShape("circle", {
        zIndex: -1,
        attrs: {
          x: 0,
          y: 0,
          r: r,
          fill: cfg.color,
          opacity: 0.6,
        },
      });
      group.sort(); // 排序，根据zIndex 排序
      back1.animate(
        {
          // 逐渐放大，并消失
          r: r + 10,
          opacity: 0.1,
          repeat: true, // 循环
        },
        3000,
        "easeCubic",
        null,
        0
      ); // 无延迟

      back2.animate(
        {
          // 逐渐放大，并消失
          r: r + 10,
          opacity: 0.1,
          repeat: true, // 循环
        },
        3000,
        "easeCubic",
        null,
        1000
      ); // 1 秒延迟

      back3.animate(
        {
          // 逐渐放大，并消失
          r: r + 10,
          opacity: 0.1,
          repeat: true, // 循环
        },
        3000,
        "easeCubic",
        null,
        2000
      ); // 2 秒延迟
    },
  },
  "circle"
);

registerNode(
  "inner-animate",
  {
    afterDraw: function afterDraw(cfg, group) {
      var size = cfg.size;
      var width = size[0] - 12;
      var height = size[1] - 12;
      var image = group.addShape("image", {
        attrs: {
          x: -width / 2,
          y: -height / 2,
          width: width,
          height: height,
          img: cfg.img,
        },
      });
      image.animate(
        {
          onFrame: function onFrame(ratio) {
            var matrix = Util.mat3.create();
            var toMatrix = Util.transform(matrix, [["r", ratio * Math.PI * 2]]);
            return {
              matrix: toMatrix,
            };
          },

          repeat: true,
        },
        3000,
        "easeCubic"
      );
    },
  },
  "rect"
);
// const graph = ref(null);
onMounted(() => {
  var graph = new Graph({
    container: "mountNode",
    width: window.innerWidth,
    height: window.innerHeight,
    defaultEdge: {
      style: {
        lineWidth: 1,
        stroke: "#b5b5b5",
      },
    },
  });
  graph.data(testData);
  graph.render();
});
</script>
<style lang="scss" scoped></style>
